﻿@{
    Layout = null;
}

<script type="text/javascript" language="javascript">
    Ext.onReady(function () {
        var panel = new Ext.Panel(//Ext.formPanel就是Panel中用了form布局  
      {
      renderTo: 'paneldiv',
      title: '容器组件',
      layout: 'accordion',
      width: 500,
      height: 200,
      layoutConfig: { animate: false },
      items: [
        { title: '元素1', html: '' },
        { title: '元素2', html: '' },
        { title: '元素3', html: '' },
        { title: '元素4', html: '' }
       ]
  }
     );
    });

    Ext.onReady(function () {

        var button = Ext.get('show-btn');
        var win;

        button.on('click', function () {

            //创建TabPanel
            var tabs = new Ext.TabPanel({
                region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                margins: '3 3 3 0',
                activeTab: 0,
                defaults: {
                    autoScroll: true
                },
                items: [{
                    title: 'Bogus Tab',
                    html: "第一个Tab的内容."
                }, {
                    title: 'Another Tab',
                    html: "我是另一个Tab"
                }, {
                    title: 'Closable Tab',
                    html: "这是一个可以关闭的Tab",
                    closable: true
                }]
            });

            //定义一个Panel
            var nav = new Ext.Panel({
                title: 'Navigation',
                region: 'west', //放在西边，即左侧
                split: true,
                width: 200,
                collapsible: true, //允许伸缩
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            });

            //如果窗口第一次被打开时才创建
            if (!win) {
                win = new Ext.Window({
                    title: 'Layout Window',
                    closable: true,
                    width: 600,
                    height: 350,
                    border: false,
                    plain: true,
                    layout: 'border',
                    closeAction: 'hide',
                    items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                });
            }
            win.show(button);
        });
    });


    Ext.onReady(function () {
        var panel = new Ext.Panel(
      {
          renderTo: 'paneldiv',
          title: '容器组件',
          layout: 'fit',
          width: 500,
          height: 100,
          items: [
        { title: '子元素1' },
        { title: '子元素2' },
        { title: '子元素3' },
        { title: '子元素4' },
        { title: '子元素5' }
       ]
      }
     );
    });



    Ext.onReady(function () {
        var win = new Ext.Window({
            title: "form Layout",
            height: 150,
            width: 230,
            plain: true,
            bodyStyle: 'padding:15px',
            items:
            {
                xtype: "form",
                labelWidth: 30,
                defaultType: "textfield",
                frame: true,
                items:
                [
                    {
                        fieldLabel: "姓名",
                        name: "username",
                        allowBlank: false
                    },
                    {
                        fieldLabel: "呢称",
                        name: "nickname"
                    },
                    {
                        fieldLabel: "生日",
                        xtype: 'datefield',
                        name: "birthday",
                        width: 127
                    }
                ]
            }
        });
        win.show();
    });

















    var hform = new Ext.form.FormPanel({
        title: "灵活布局的表单",
        width: 650,
        autoHeight: true,
        frame: true,
        renderTo: Ext.getBody(),
        layout: "form", // 整个大的表单是form布局
        labelWidth: 65,
        labelAlign: "right",

        items: [{ // 行1
            layout: "column", // 从左往右的布局
            items: [{
                columnWidth: .3, // 该列有整行中所占百分比
                layout: "form", // 从上往下的布局
                items: [{
                    xtype: "textfield",
                    fieldLabel: "姓",
                    width: 120
                }]
            }, {
                columnWidth: .3,
                layout: "form",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "名",
                    width: 120
                }]
            }, {
                columnWidth: .3,
                layout: "form",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "英文名",
                    width: 120
                }]
            }]
        }, {	// 行2
            layout: "column",
            items: [{
                columnWidth: .46,
                layout: "form",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "座右铭1",
                    width: 200
                }]
            }, {
                columnWidth: .46,
                layout: "form",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "座右铭2",
                    width: 200
                }]
            }]
        }, {// 行3
            layout: "form",
            items: [{
                xtype: "textfield",
                fieldLabel: "奖励",
                width: 500
            }, {
                xtype: "textfield",
                fieldLabel: "处罚",
                width: 500
            }]
        }, {// 行4
            layout: "column",
            items: [{
                layout: "form",
                columnWidth: 0.2,
                items: [{
                    xtype: "textfield",
                    fieldLabel: "电影最爱",
                    width: 50
                }]
            }, {
                layout: "form",
                columnWidth: 0.2,
                items: [{
                    xtype: "textfield",
                    fieldLabel: "音乐最爱",
                    width: 50
                }]
            }, {
                layout: "form",
                columnWidth: 0.2,
                items: [{
                    xtype: "textfield",
                    fieldLabel: "明星最爱",
                    width: 50
                }]
            }, {
                layout: "form",
                columnWidth: 0.2,
                items: [{
                    xtype: "textfield",
                    fieldLabel: "运动最爱",
                    width: 50
                }]
            }]
        }],
        buttonAlign: "center",
        buttons: [{
            text: "提交"
        }, {
            text: "重置"
        }]
    });


</script>









 <mce:script type="text/javascript"><!--
   Ext.onReady(function(){
        //初始化Extjs
        Ext.QuickTips.init();
        Ext.BLANK_IMAGE_URL ='./resources/images/default/s.gif';
        //首先读取数据，Json格式
        var store = new Ext.data.Store
        ({      
            //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
            reader:new Ext.data.JsonReader
            ({
            root:"Table",
            //从数据库中读取的总记录数
            totalProperty: 'totalCount',
            //要读取出来的字段
            fields:
            [
                'ID','RoleName','Remark'
            ]
            }),   
            //获取数据源(该方法返回一个json格式的数据源)
            proxy: new Ext.data.HttpProxy
            ({
                url: '../../BackGround/RoleManage/Role.ashx?AutoLoad=true'      
            })
        });
        //定义GridPanel的列名称
       var cms=new Ext.grid.ColumnModel
       (
       [
        new Ext.grid.RowNumberer({header:"编号",width:30,align:"center"}),//添加一个编号
        new Ext.grid.CheckboxSelectionModel(),//增加 CheckBox多选框列
        //header列名称，dateIndex对应数据库字段名称,sortable支持排序
        {header:"角色名称",dataIndex:"RoleName",sortable:true},
        {header:"角色备注",dataIndex:"Remark",sortable:true}
         
       ]
       );
      //编辑panel，用于添加，修改
      var Edit_Panel=new Ext.FormPanel({    
        labelWidth: 75, 
        labelAlign:'right',
        frame:true,      
        bodyStyle:'padding:5px 5px 0',
        width: 380,
        defaults: {width: 150},
        defaultType: 'textfield',
        items: 
        [
            {
                fieldLabel: '角色编号',
                name: 'ID',
                xtype:'hidden'
            },
            {
                //label名称
                fieldLabel: '角色名称',
                //textfield名称
                name: 'RoleName',
                //textfield正则
                allowBlank:false,//是否允许为空！false不允许
                blankText:"不允许为空",//提示信息
                minLength :2 , 
                minLengthText : "姓名最少2个字符", 
                maxLength : 4 , 
                maxLengthText :"姓名至多4个字符",
                regex:/[/u4e00-/u9fa5]/,//正则表达式
                regexText:"只能为中文"
            },
            {
               fieldLabel: '角色编码',
               name: 'RoleCode',
               allowBlank:false,
               blankText:"不允许为空",
                xtype:'hidden'
            },
            {
             fieldLabel: '说明',
                name: 'Remark'
            
            }
        ]
    
    });
     //弹出层
   var Edit_Window = new Ext.Window({
        collapsible: true,
        maximizable: true,
        minWidth: 300,
        height :180 ,
        minHeight: 200,
        width:378,
        modal:true,
        closeAction:"hide",
        //所谓布局就是指容器组件中子元素的分布，排列组合方式
        layout: 'form',//layout布局方式为form
        plain: true,
        title:'编辑对话框',
        bodyStyle: 'padding:5px;',
        buttonAlign: 'center',
        items: Edit_Panel,
        buttons: [{
            text: '保存',
            //点击保存按钮后触发事件
            handler:function(){
            //得到编辑模板中id为ID的控件名称的值
            var ID=Edit_Panel.getForm().findField('ID').getValue();
              //得到编辑模板中id为RoleName的控件名称的值
            var RoleName=Edit_Panel.getForm().findField('RoleName').getValue();
            //var RoleCode=Edit_Panel.getForm().findField('RoleCode').getValue();
            var Remark=Edit_Panel.getForm().findField('Remark').getValue();
            var jsonData='';
            if(ID=='')
            //如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色名称(RoleName),角色编码(RoleCode),说明(Remark),操作类型(添加操作:AddUser,更新操作:UpdateUser)写成json的形式作为参数传到后台
           jsonData= {operatype:'AddRole',ID:ID,RoleName:RoleName,Remark:Remark};
            else
           jsonData= {operatype:'UpdateRole',ID:ID,RoleName:RoleName,Remark:Remark};
            Edit_Window.hide();
            CodeOperaMethod('../../WebUI/RoleManage/RoleManege.aspx',jsonData);
            //重新加载store信息
            store.reload();
            grid.store.reload();
            }
        },{
            text: '重置',  handler:function(){Edit_Panel.getForm().reset();}
        }]
    });
           //后台数据交互方法
       var CodeOperaMethod=function(u,p){
       var conn=new Ext.data.Connection();
       conn.request({
       //请求的 Url
       url:u,
       // 传递的参数
       params:p,
       method:'post',
       scope:this,
       //回调函数，根据执行结果作不同的操作，如果成功提示操作成功的信息，如果失败提示失败的信息
       callback:function(options,success,response){
       if(success){ Ext.MessageBox.alert("提示","操作成功！");
       store.reload();
       grid.store.reload();
       }
       else{ Ext.MessageBox.alert("提示","所提交的操作失败！");}
       
       }});};
       
         //删除方法
	   function delRecord(btn,pressed)
	   {
	    //获取ID为MenuGridPanel的控件名称得到当前选中项
	    rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
	  	       if(rows.length==0)
	  	       {
	  	       Ext.Msg.alert("","请至少选择一行你要删除的数据！");
	  	       return;
	  	       }
	    Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);}
        function showResult(btn)
        {
         //确定要删除你选定项的信息
        if(btn=='yes')
        {
            var row=Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
            var jsonData="";
            for(var i=0,len=row.length;i<len;i++)
            {
            //得到当前选中项的ID集合
            var ss =row[i].get("ID");
             if(i==0)
             jsonData = jsonData + ss; 
             else
             jsonData = jsonData + ","+ ss; 
         }
         //将要删除的信息传递到后台处理,然后重新加载grid
         var conn = new Ext.data.Connection();
         conn.request({
         url:"../../WebUI/RoleManage/RoleManege.aspx?DelRecode=", 
         params:{strProjects:jsonData},
         method: 'post',
         scope: this,
         callback:function(options,success, response){ 
         if(success){ 
         Ext.MessageBox.alert("提示","所选记录成功删除！");
         store.reload();
         grid.store.reload();
         } 
         else 
         { Ext.MessageBox.alert("提示","所选记录删除失败！");} 
         } 
         })
         
         }
         }; 
       //定义一个智能感应的ComboBox
       var cmbox=new Ext.form.ComboBox
       (
       {
         id:'cmbox',
         title:'角色名称',
         //加载数据源
         store:store,
         //从本地加载数据（智能感应效果）
         mode:"local",
         //显示字段类似DropDownlist中的DataTextField 
         displayField:'RoleName',
         //类似DropDownlist中的DataValueField  
         valueField:'ID',
         width:160,
         //不允许为空
         allowBlank:false,
         //默认值
	    emptyText:'请输入角色名称进行搜索...',
	    //当为空的时候提示
	    blankText:'请输入角色名称...'
       }
       );
       //构建GridPanel
        var grid = new Ext.grid.GridPanel
        ({
            id:'MenuGridPanel',
            renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域
            title: '角色管理',//网格标题
            width:'100%',
            height: 500,
            store: store,//grid数据源
            loadMask: {msg:'加载数据中,请等待......'},//显示等待数据加载（loading）图标
            cm:cms,//列名称
            sm: new Ext.grid.CheckboxSelectionModel(),//要显示多选框列必加此项
            //定义一个toolbar
            tbar:
            [	  	    
	  	   {
	  	   text:"编辑",
           cls: 'x-btn-text-icon details',
           icon:"../ext-3.1.0/blue16_042.png",
           handler:function()
           {
            //重置编辑模板
           Edit_Panel.getForm().reset();
           rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
	  	   if(rows.length!=1)
	  	   {
	  	   Ext.Msg.alert("","请你选择一行数据进行操作！");
	  	   return;
	  	   }
	  	   //打开窗体
	  	    Edit_Window.show();
	  	    //将选中项的信息绑定到TextField中
	  	    Edit_Panel.getForm().findField('ID').setValue(rows[0].get('ID'));
            //Edit_Panel.getForm().findField('RoleCode').setValue(rows[0].get('RoleCode'));
            Edit_Panel.getForm().findField('RoleName').setValue(rows[0].get('RoleName'));
            Edit_Panel.getForm().findField('Remark').setValue(rows[0].get('Remark'));
            
	  	   }
	  	   }, 
	  	   {
	  	   text:"添加",
         cls: 'x-btn-text-icon details',
         icon:"../ext-3.1.0/add_16.png",
         handler:function()
           {
           Edit_Panel.getForm().reset();
           Edit_Window.show();
           }
           }, 
	  	   {
	  	   text:"删除",
            cls: 'x-btn-text-icon details',
             icon:"../ext-3.1.0/blue16_016.png",
            handler:delRecord
            },'-',
            
            //定义一个搜索框
            cmbox,
              '-',
            {
            
	  	   xtype:'button',
	  	    cls: 'x-btn-text-icon details',
           icon:"../ext-3.1.0/blue16_068.png",
	  	   text:"查找",
	  	   handler:function()
	  	   {
	  	    //Ext.getCmp("searchfield").getValue()得到Textfield的值
	  	    //过滤条件为角色名称(RoleName)来搜索匹配的信息,
	  	    //filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
	  	    //第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
	  	    store.filter('RoleName',Ext.getCmp("cmbox").getValue(),false,false);
	  	   }
	  	   }
       
           ],
            bbar: new Ext.PagingToolbar
            ({//自带分页工具条
                pageSize: 10,
                store: store,
                displayInfo: true,
                displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',
                emptyMsg: "没有数据"
            })
        });
        //从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10
        store.load({params:{start:0, limit:10}});
    });

    
// --></mce:script>
